<template>
  <!-- <header>
    <div class="wrapper">
      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header> -->
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component
        :is="Component"
        :key="$route.path"
        v-if="$route.meta.keepAlive"
      />
    </keep-alive>
    <component
      :is="Component"
      :key="$route.path"
      v-if="!$route.meta.keepAlive"
    />
  </router-view>

  <!-- <keep-alive>
      <RouterView />
      <router-view v-if="$route.meta.keepAlive" />
  </keep-alive> -->
  <!-- <router-view v-if="!$route.meta.keepAlive" /> -->
  <!-- <RouterView v-if="!$route.meta.keepAlive" /> -->
  <maskLayer v-model="visible" center append-to-body>
    <div class="content">
      <div class="tip_title">
        <span>提示</span>
        <!-- <img @click="closeVideo" src="../assets/home/14.png" alt="" /> -->
      </div>
      <div class="tip_text">检测到有新版本,请更新</div>
      <div class="tip_btn">
        <!-- <div class="tip_btn_1" @click="closeVideo">{{ text.cancelText }}</div> -->
        <div class="tip_btn_2" @click="confirmUpload">更新</div>
      </div>
    </div>
  </maskLayer>
</template>

<script setup>
import maskLayer from "@/components/maskLayer.vue";
import { RouterLink, RouterView } from "vue-router";
import { ref, onMounted } from "vue";
import { useUserStore } from "./stores/user";
const userStore = useUserStore();

onMounted(() => {
  // 获取电脑mac地址
  if (window.api) {
    let mac = window.api.counter();
    userStore.setMac(mac);
    // 更新下载新版本进度
    let progress = window.api.updateProgress();
    // console.log(progress);

    // 接收到主进程更新通知
    let versionInfo = window.api.updated();
    console.log(versionInfo);
    if (versionInfo == 1) {
      visible.value = true;
    }
    let errorMsg = window.api.uploadError();
    console.log(errorMsg);
  } else {
    let mac = "b4:2e:99:ef:f2:95";
    userStore.setMac(mac);
  }
});

let visible = ref(false);
function confirmUpload() {
  visible.value = false;
  window.api.sendMessageToMainProcess();
}
</script>


<style lang="scss" scoped>
.content {
  background: #fff;
  width: 190px;
  padding: 16px;
  .tip_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 9px;
    font-weight: bold;
    span {
      font-weight: bold;
    }
    img {
      width: 8px;
      height: 8px;
      cursor: pointer;
    }
  }
  .tip_text {
    font-size: 8px;
    margin: 12px 0 22px;
  }
  .tip_btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .tip_btn_1 {
      width: 52px;
      height: 18px;
      background: #f6f7f9;
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 8px;
      cursor: pointer;
    }
    .tip_btn_2 {
      width: 52px;
      height: 18px;
      background: #1f52ae;
      color: #fff;
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 8px;
      cursor: pointer;
      margin-left: 12px;
    }
  }
}
</style>
